import React, { Component } from 'react';
import PropTypes from 'prop-types';
// import LinearGradient from 'react-native-linear-gradient';
// import { Config } from '../../public/js/config';

import {
  Text,
  View,
  Image,
  StatusBar,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

import {
  width,
  titleHeight,
  unitWidth,
  statusBarHeight,
  reallySize,
} from '../../utils/Global';

export default class NavBar extends Component {
  constructor(props) {
    super(props)
    const {
      keyGoBack,
      goBackTrue,
      enterKey,
    } = this.props
    this.state = {
      goBackTrue: goBackTrue, // 修改 认证默认专递的值
      key: keyGoBack, // 前一层页面navigation key值
      enterKey: enterKey, // 认证时 传递的key值页面
    }
  }
  /*
   title:头部标题
   navigation:路由属性 由父组件传递
   hideLeftArrow:{true/false 是否隐藏左边返回按钮}
   pressRight:{右侧按钮点击事件}
   leftText:{左侧标题}
   backgroundColor:{导航栏背景颜色}
   titleColor:标题颜色
   colors: 背景色
   barStyle:状态栏文字颜色
   LifeImage:左侧图标
   shadow: boolean||false:隐藏||true:显示*||是否需要阴影
*/
  static propTypes = {
    title: PropTypes.string.isRequired,
    hideLeftArrow: PropTypes.bool,
    back: PropTypes.func,
    pressRight: PropTypes.func,
    leftText: PropTypes.string,
    backgroundColor: PropTypes.string,
    titleColor: PropTypes.string,
    right: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    rightImage: Image.propTypes.source,
    LifeImage: Image.propTypes.source,
    statusBarBgColor: PropTypes.string,
    barStyle: PropTypes.string,
    colors: PropTypes.any,
    shadow: PropTypes.any,
  };

  static defaultProps = {
    title: '',
    hideLeftArrow: true,
    pressRight: () => { },
  };

  back() {
    const {
      goBackTrue,
      key,
      enterKey,
      enterBol,
    } = this.state
    if (this.props.back) {
      this.props.back();
      return;
    }
    // 判断是不是 修改 / 认证
    if (goBackTrue) {
      this.props.navigation.goBack(key);
    } else {
      this.props.navigation.goBack(enterKey);
    }
    this.props.navigation.goBack();

  }

  render() {
    const {
      backgroundColor,
      titleColor,
      colors,
      shadow,
      title
    } = this.props;
    const returnIconWhite = require('../../assets/images/headerIcon/returnIconWhite.png')
    const returnIconGary = require('../../assets/images/headerIcon/return1.png')
    return (
      <View
        style={[
          TitleStyle.titleBar,
          backgroundColor ?
            { backgroundColor: backgroundColor } : null,
          shadow ?
            TitleStyle.bodyOn : TitleStyle.body,
        ]}>
        {/* <LinearGradient
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          colors={colors || Config.app.window.btnBackgroundColor}
          locations={[0, 1]}
          style={{ width: '100%', height: titleHeight + 10 }}> */}
        <View>
          <StatusBar
            hidden={false}
            backgroundColor={backgroundColor || 'transparent'}
            barStyle={
              'dark-content'
            } /* 白底字：dark-content   黑底白字：light-content */
            translucent={
              false
            } /* 是否透明ios||android this.props.statusBarBgColor  */
          />

          <View style={TitleStyle.statusBar} />

          <View style={TitleStyle.titleBarContent}>
            {!this.props.hideLeftArrow ?
              <View style={TitleStyle.left} /> :
              <TouchableOpacity
                activeOpacity={1}
                onPress={this.back.bind(this)}
                style={TitleStyle.left}>
                <Image
                  style={TitleStyle.titleLeftImage}
                  source={title == "照片详情" ||
                    title == "开通会员权益" ||
                    title == "个人头像" ||
                    title == "营业执照查看" ?
                    returnIconWhite : returnIconGary} />
                <Text style={TitleStyle.leftText}>{this.props.leftText}</Text>
              </TouchableOpacity>}

            <View style={TitleStyle.middle}>
              <Text
                numberOfLines={1}
                style={[
                  TitleStyle.middleTitle,
                  titleColor ? { color: titleColor } : null,
                ]}>
                {this.props.title}
              </Text>
            </View>
            {this.renderRight()}
          </View>
          {/* </LinearGradient> */}
        </View>
      </View>
    );
  }

  renderRight() {
    if (!this.props.right &&
      !this.props.rightImage) {
      return <View style={TitleStyle.right} />;
    }
    return (
      <TouchableOpacity
        activeOpacity={1}
        style={TitleStyle.right}
        onPress={() => {
          this.props.pressRight();
        }}>
        {typeof this.props.right == 'object' ? (
          this.props.right
        ) : (
          <Text style={TitleStyle.rightText}>{this.props.right}</Text>
        )}
        {this.props.rightImage ? (
          <Image
            resizeMode={'contain'}
            style={TitleStyle.rightImage}
            source={this.props.rightImage}
          />
        ) : null}
      </TouchableOpacity>
    );
  }
}

const TitleStyle = StyleSheet.create({
  body: {
    position: 'relative',
    zIndex: 50,
    shadowOffset: {
      width: 0,
      height: 0
    }, // 阴影偏移
    elevation: 0,
  },
  bodyOn: {
    shadowColor: '#ffffff', //  阴影颜色
    shadowOffset: {
      width: 1,
      height: 1
    }, // 阴影偏移
    elevation: 10,
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 10, //  圆角
  },
  titleBar: {
    width: width,
    // height: titleHeight + 10,
    backgroundColor: "#fff"

  },
  titleBarContent: {
    flexDirection: 'row',
    alignItems: 'center',
    width: width,
    justifyContent: 'space-between',
  },
  titleBarSearchContent: {
    flexDirection: 'row',
    alignItems: 'center',
    width: width,
    height: titleHeight - statusBarHeight,
  },

  searchLeftIcon: {
    width: unitWidth * 30,
    height: unitWidth * 38,
    resizeMode: 'contain',
    marginLeft: unitWidth * 24,
    marginRight: unitWidth * 15,
  },
  searchLeftText: {
    width: unitWidth * 140,
    fontSize: unitWidth * 30,
    color: '#ffffff',
  },

  searchBlock: {
    flexDirection: 'row',
    width: unitWidth * 500,
    height: unitWidth * 60,
    borderRadius: unitWidth * 30,
    backgroundColor: 'white',
    alignItems: 'center',
    paddingLeft: unitWidth * 30,
    paddingRight: unitWidth * 30,
  },

  searchIcon: {
    width: unitWidth * 40,
    height: unitWidth * 40,
    resizeMode: 'contain',
    marginRight: unitWidth * 30,
  },

  searchBarInput: {
    width: unitWidth * 350,
    height: unitWidth * 60,
    fontSize: unitWidth * 30,
    backgroundColor: 'transparent',
    alignItems: 'center',
    margin: 0,
    padding: 0,
  },

  left: {
    width: unitWidth * 180,
    height: titleHeight,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingLeft: unitWidth * 10,
  },
  middle: {
    height: titleHeight,
    justifyContent: 'center',
    alignItems: 'center',

  },
  middleTitle: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
    alignItems: 'center',
    justifyContent: 'center',
  },

  right: {
    width: unitWidth * 180,
    height: titleHeight,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingRight: unitWidth * 30,
  },

  leftText: {
    fontSize: unitWidth * 30,
    color: '#333',
    alignItems: 'center',
    justifyContent: 'center',
  },

  rightText: {
    fontSize: unitWidth * 30,
    color: '#333',
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightImage: {
    width: reallySize(20),
    height: reallySize(20),
    marginLeft: unitWidth * 5,
  },

  titleLeftImage: {
    width: unitWidth * 50,
    height: unitWidth * 55,
    marginRight: unitWidth * 5,
    resizeMode: 'contain',
  },

  homeTitleIcon: {
    width: unitWidth * 213,
    height: unitWidth * 52,
    resizeMode: 'contain',
  },
  titleRightImage: {
    width: unitWidth * 65,
    height: unitWidth * 65,
    resizeMode: 'contain',
  },
  statusBar: {
    width: width,
    height: statusBarHeight,
    backgroundColor: 'transparent',
    // backgroundColor: "red"
  },
});
